<template>
<div class="student">
<h1>学生信息管理模块</h1>
<div>
  <p>学号：<input v-model="student.stuNo"></p>
  <p>姓名：<input v-model="student.username"></p>
  <p>性别：
    <input type="radio" id="male" value="1" v-model="student.gender">
    <label for="male">男</label>&nbsp&nbsp
    <input type="radio" id="female" value="0" v-model="student.gender">
    <label for="female">女</label>
  </p>
  <p>年龄：<input v-model="student.age"></p>
  <p>
    年级：
    <select v-model="student.gradeId" name="grade">
      <option value="1">大一</option>
      <option value="2">大二</option>
      <option value="3">大三</option>
      <option value="4">大四</option>
    </select>
  </p>
  <p>手机：<input v-model="student.phone"></p>
  <p>邮箱：<input v-model="student.email"></p>
  <p><button @click="save">保存</button></p>
</div>
</div>
</template>

<script>
export default {
  name: "StudentView",
  data(){ // 数据定义区域
    return{
      student:{
        username:"tom",
        stuNo:"s001",
        gender:0,
        age:18,
        gradeId:4,
        phone:'',
        email:'abc@qq.com'
      }
    }
  },
  methods:{ // 方法定义区域
    // 保存数据
    save(){
      // todo 验证姓名不能为空，年龄必须是1-100
      if (this.student.age>100 || this.student.age<1){
        alert('年龄不正确，必须在1-100之间')
      }

      // 数据校验通过，保存数据到数据库
    }
  }
}
</script>

<style scoped>

</style>